<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_common.evaluate }}</view>
				<view></view>
			</view>
			
			<!-- tabs -->
			<v-tabs v-model="tabIndex" :tabs="tabsList"></v-tabs>
		</view>
		
		<!-- 分割线 -->
		<view class="u-p-t-10">
			<swiper style="height: calc(100vh - 204rpx - var(--status-bar-height));" :current="tabIndex"
				@change="tabIndex = $event.detail.current">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<comment-list ref="mescrollItem" :i="index" :index="tabIndex" :goods-id="goodsId" @change="updateCount"></comment-list>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import CommentList from './components/comment-list.vue'
	export default {
		components: { CommentList },
		data() {
			return {
				tabs: [],
				tabIndex: 0,
				
				goodsId: '',
				
				commentTypes: [],
				commentTypeIndex: 0
			}
		},
		computed: {
			tabsList() {
				return this.tabs.map(item => `${ item.title }(${ item.count || 0 })`)
			}
		},
		onLoad({ goodsId }) {
			this.goodsId = goodsId
			// 初始化顶部导航栏
			let tabs = ['all', 'good_evaluate', 'medio_evaluate', 'bad_evaluate'].map((item, index) => {
				let result = {
					key: item,
					value: index,
					count: 0,
					title: this.lang_common[item]
				}
				return result
			})
			
			this.tabs = tabs
			
			this.commentTypes = ['12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431', '12431']
		},
		methods: {
			// 更新tab列表数量
			updateCount({ index, count }) {
				this.$set(this.tabs[index], 'count', count)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		position: relative;
		top: 0;
		left: 0;
		padding-bottom: 14rpx;
		
		&-line {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 36rpx;
			height: 6rpx;
			background: #FC2642;
			border-radius: 22rpx;
		}
	}
	
	.score-container {
		position: relative;
		width: 100vw;
	}
	
	.comment-type {
		padding: 8rpx 24rpx;
		border: 2rpx solid #F9F9F9;
		background-color: #F9F9F9;
		border-radius: 100rpx;
		
		&-container {
			background-color: #ffffff;
		}
		
		&-active {
			color: #FD2E58;
			border-color: #FD2E58;
			background-color: #FFE3E8;
		}
	}
</style>
